<template>
    <div>
        <basic-container>
            <div class="madp-search">
                <el-form :model="searchForm" ref="searchForm" class="madp-search-form" label-width="120px">
                    <el-form-item label="分行:">
                        <el-select v-model="searchForm.q1" placeholder="请选择分行">
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="支行:">
                        <el-select v-model="searchForm.q2" placeholder="请选择支行">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="姓名:" prop="name">
                        <el-input placeholder="请输入姓名" v-model.trim="searchForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号:" prop="mobile">
                        <el-input placeholder="请输入手机号" type="text" v-model.trim="searchForm.mobile" @input="searchForm.mobile = searchForm.mobile.replace(/\D/g, '')"></el-input>
                    </el-form-item>
                    <el-form-item label="激活状态" prop="status">
                        <el-select v-model="searchForm.status" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="madp-tar madp-mb20">
                <el-button type="primary" @click="searchFn('searchForm')">搜索</el-button>
                <el-button @click="clearFn('searchForm')">清空</el-button>
            </div>
            <!-- table列表 -->
            <el-table
                :data="tableData"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                stripe
            >
                <el-table-column label="序号" align="center">
                    <template slot-scope="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="企业成员" align="center" prop="name"></el-table-column>
                <el-table-column label="激活状态" align="center" prop="status">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 1">已激活</span>
                        <span v-if="scope.row.status == 2">已禁用</span>
                        <span v-if="scope.row.status == 4">未激活</span>
                        <span v-if="scope.row.status == 5">已退出企业</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号码" align="center" prop="mobile">
                    <template slot-scope="scope">
                        <span v-if="scope.row.mobile == ''">--</span>
                        <span v-else>{{ scope.row.mobile }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="职务" align="center" prop="position">
                    <template slot-scope="scope">
                        <span v-if="scope.row.position == ''">--</span>
                        <span v-else>{{ scope.row.position }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleClick(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="madp-pagination-wrap">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
        </basic-container>
    </div>
</template>
<script>
import { queryAllEmployees } from '@/api/customer/incumbency-succession';
export default {
    props: [],
    data() {
        return {
            // 查询表单
            searchForm: {
                name: '',
                mobile: '',
                status: ''
            },
            // 选择内容
            options: [
                {
                    value: 1,
                    label: '已激活'
                },
                {
                    value: 4,
                    label: '未激活'
                },
                {
                    value: 2,
                    label: '已禁用'
                },
                {
                    value: 5,
                    label: '已退出企业'
                }
            ],
            value: '',
            // 表格数据
            tableData: [],
            // 分页
            page: {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            },
            // 选择内容
            options1: [],
            options2: []
        };
    },
    mounted() {
        this.getAllEmployeeList();
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.pageSize + $index + 1;
        },
        // 获取成员列表
        getAllEmployeeList() {
            let params = {
                name: this.searchForm.name,
                mobile: this.searchForm.mobile,
                status: this.searchForm.status,
                current: this.page.current,
                size: this.page.pageSize
            };
            queryAllEmployees(params).then((res) => {
                if (res.data.code === 0) {
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                }
            });
        },
        // 点击查看
        handleClick(row) {
            this.$router.push({
                path: '/customer-list',
                query: { id: row.id, wxUserId: row.wxUserId }
            });
        },
        // 条件查询
        searchFn() {
            this.page.current = 1;
            this.getAllEmployeeList();
        },
        //清空
        clearFn(formName) {
            this.searchForm = {
                name: '',
                mobile: '',
                status: ''
            };
            this.$refs[formName].resetFields();
            this.getAllEmployeeList();
        },
        // 分页
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getAllEmployeeList(this.page);
        },
        // 分页
        handleCurrentChange(val) {
            this.page.current = val;
            this.getAllEmployeeList(this.page);
        }
    }
};
</script>
<style lang="scss" scoped>
.madp-search {
    display: flex;
    .madp-search-form {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding-right: 10px;
    }
    .madp-search-right {
        min-width: 220px;
    }
}

.madp-more {
    cursor: pointer;
    color: #409eff;
    margin-left: 20px;
}
// 分页
.madp-pagination-wrap {
    float: right;
    margin: 20px;
}
</style>
